import React, {useContext, useEffect} from 'react';
import {View, ScrollView, TouchableOpacity, Platform} from 'react-native';
import {Button, Text, ListItem, Avatar} from '@rneui/base';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import {useMount, useSafeState} from 'ahooks';
import {useRoute} from '@react-navigation/native';
import {useSelector, useDispatch} from 'react-redux';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
const NativeStack = createNativeStackNavigator();
import GlobalContext from '@/GlobalContext';

import {getDefaultHeaderHeight} from '@react-navigation/elements';
import {
  useSafeAreaFrame,
  useSafeAreaInsets,
} from 'react-native-safe-area-context';

import routers from './routers';
import {IconColor} from './config';
import * as Icon from './svg';

const LGroup = ({title = '标题', children}) => {
  const [expanded, setExpanded] = useSafeState(true);
  return (
    <ListItem.Accordion
      content={
        <ListItem.Content>
          <Text>{title}</Text>
        </ListItem.Content>
      }
      isExpanded={expanded}
      onPress={() => {
        setExpanded(!expanded);
      }}>
      <View
        style={{
          paddingLeft: 10,
        }}>
        {children}
      </View>
    </ListItem.Accordion>
  );
};

import {rPPath,SelectBgColor,SelectTextColor} from './config';
export default ({leftNavIsOpen, setLeftNavIsOpen}) => {
  const {navigationRef} = useContext(GlobalContext);
  const frame = useSafeAreaFrame();
  const insets = useSafeAreaInsets();
  const headerHeight = getDefaultHeaderHeight(frame, false, insets.top);

  const routeData = useSelector(state => state.routeData.value);
  const routeMy = useRoute();
  const isShow = routeData?.name === routeMy?.name;
  // useEffect(() => {
  //   console.log('MainNav.isShow', isShow);
  // }, [isShow]);
  // useEffect(() => {
  //   console.log(
  //     'leftNavIsOpen',
  //     leftNavIsOpen,
  //     'routeData.name',
  //     routeData?.name,
  //     'routeMy.name',
  //     routeMy?.name,
  //   );
  // }, [leftNavIsOpen]);

  return (
    <View style={{flex: 1}}>
      <View
        style={{
          backgroundColor: '#f9f9f9',
          flexDirection: 'row',
          alignItems: 'center',
          height: headerHeight - insets.top,
          paddingHorizontal: 12,
        }}>
        <Icon.SmileFace width={36} />
        <View style={{marginLeft: 16, flex: 1}}>
          <Text h4>常用功能</Text>
        </View>
        <TouchableOpacity
          onPress={() => {
            navigationRef?.navigate('Home');
          }}>
          <Text>Home</Text>
        </TouchableOpacity>
      </View>
      <ScrollView style={{flex: 1}}>
        {routers.map(([groupKey, [groupName, pages = []]], groupIndex) => (
          <LGroup key={groupIndex} title={groupName}>
            {pages.map(([comKey, , pageName, LIcon], pageIndex) => {
              const pageKey = `${rPPath}/${groupKey}/${comKey}`;
              const containerStyle = {}
              const txtStyle = {}
              let iColor = IconColor;
              if(pageKey === routeData?.name){
                containerStyle.backgroundColor = SelectBgColor;
                txtStyle.color = SelectTextColor;
                iColor = SelectTextColor;
              }
              return (
                <TouchableOpacity
                  key={pageIndex}
                  onPress={() => {
                    navigationRef?.navigate(pageKey);
                    setLeftNavIsOpen(false);
                  }}>
                  <ListItem
                    containerStyle={containerStyle}
                  >
                    <LIcon color={iColor} width={24} height={24} />
                    <Text style={txtStyle}>{pageName}</Text>
                  </ListItem>
                </TouchableOpacity>
              )
            })}
          </LGroup>
        ))}
      </ScrollView>
    </View>
  );
};
